<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>UniCMS</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
	<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet" />
  </head>
  <body>
	 <div class="container" style="margin-top: 80px">
	 	<div class="jumbotron">
			<div style="display: flex;flex-wrap:wrap;justify-content:center;">
				<img  src="/static/cmslogo.jpg" >
			</div>
			
			<div style="width: 800px;margin: 25px auto 0 auto;">
				<h3 style="font-weight: 600;">恭喜你环境配置正确，请按如下操作：<a style="float: right;" class="btn btn-warning btn-mini" target="_blank" href="https://www.kancloud.cn/lizhilicctv/unicms/2057844" role="button">查看手册</a></h3>
				<div style="clear: both;margin-bottom: 25px;">
					
				</div>
				<div class="list-group">
				  <li class="list-group-item">1,请输入需要使用的数据库名称和账号密码</li>
				  <li class="list-group-item">2,验证数据库是否正确</li>
				  <li class="list-group-item">3,导入数据，完成</li>
				</div>
			
				<form action=""  method="post">
				  <div class="form-group">
					<label for="l1">数据库名称</label>
					<input type="text" name="database" class="form-control" id="l1" placeholder="请输入数据库名称">
				  </div>
				  <div class="form-group">
					<label for="l2">用户名称</label>
					<input type="text" name="username" class="form-control" id="l2" placeholder="请输入用户名">
				  </div>
				  <div class="form-group">
					<label for="l3">密码</label>
					<input type="text" name="password" class="form-control" id="l3" placeholder="请输入密码">
				  </div>
				  <a  onclick="yanzheng()"  style="width: 100px;" id="yan"  class="btn btn-danger">验证数据库</a>
				  <button style="width: 100px; display: none;" id="ti" type="submit" class="btn btn-primary">导入数据</button>
				</form>
			</div>
	 	</div>
	 </div>
	 <style type="text/css">
	 	 #ti{
			position:relative;
			animation:mymove 2s infinite;
			-webkit-animation:mymove 2s infinite; /*Safari and Chrome*/
			animation-direction:alternate;/*轮流反向播放动画。*/
			animation-timing-function: ease-in-out; /*动画的速度曲线*/
			/* Safari 和 Chrome */
			-webkit-animation:mymove 2s infinite;
			-webkit-animation-direction:alternate;/*轮流反向播放动画。*/
			-webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
		}
		@keyframes mymove
		{
			0%{
				transform: scale(1);  /*开始为原始大小*/
				background-color: #337ab7;
			}
			25%{
				transform: scale(1.1); /*放大1.1倍*/
				background-color: #c9302c;
			}
			50%{
				transform: scale(1);
				background-color: #337ab7;
			}
			75%{
				transform: scale(1.1);
				background-color: #c9302c;
			}

		}
		
		@-webkit-keyframes mymove /*Safari and Chrome*/
		{
			0%{
			transform: scale(1);  /*开始为原始大小*/
			}
			25%{
				transform: scale(1.1); /*放大1.1倍*/
			}
			50%{
				transform: scale(1);
			}
			75%{
				transform: scale(1.1);
			}
		}
	 </style>
	 <script type="text/javascript">
		$(function () {
			$('form').bootstrapValidator({
				message: 'This value is not valid',
				feedbackIcons: {
					valid: 'glyphicon glyphicon-ok',
					invalid: 'glyphicon glyphicon-remove',
					validating: 'glyphicon glyphicon-refresh'
				},
				fields: {
					database: {
						message: '数据库名称验证失败',
						validators: {
							notEmpty: {
								message: '数据库名称不能为空'
							}
						}
					},
					username: {
						message: '用户名验证失败',
						validators: {
							notEmpty: {
								message: '用户名不能为空'
							}
						}
					},
					password: {
						message: '密码验证失败',
						validators: {
							notEmpty: {
								message: '密码不能为空'
							}
						}
					},
				}
			});
		});
		function yanzheng(e){
			let data1=$('#l1').val();
			let user=$('#l2').val();
			let pass=$('#l3').val();
			if(!data1 || !user || !pass){
				alert("数据库账号密码必须填写");
				return false; 
			}
			 $.post(
			 '{:url('install/ajax')}',
			{
				token:'{$Request.token}',
				data:data1,
				user:user,
				pass:pass
			},
			function(data,status){
				console.log(status);
				if(data.code==1){
					alert('账号密码正确，请导入数据！')
					$('#yan').hide();
					$('#ti').show();
				}else if(data.code==2){
					if(confirm('数据库不存在，是否立即创建')==true){
					    $.post(
					     '{:url('install/chuang')}',
					    {
					    	token:'{$Request.token}',
					    	data:data1,
					    	user:user,
					    	pass:pass
					    },
					    function(data,status){
					    	if(data.code==1){
					    		$('#yan').hide();
					    		$('#ti').show();
								alert(data.msg)
					    	}else{
					    		alert(data.msg)
					    	}
					    });
					}else{
					   return false;
					}
				}else{
					alert(data.msg)
				}
			});
			
			
		}
		
	 </script>
  </body>
</html>